<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>角色管理页</title>
    <!-- 引入Vue2 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>角色管理页</h1>
        <ul>
            <li v-for="role in roles" :key="role.id">
                {{ role.name }} {{ role.description}}
                <button @click="showUpdateFrom(role.id)">编辑</button>
            </li>
        </ul>
        <button @click="showAddForm">新增</button>
        <hr/>
        <form @submit.prevent="saveRole" v-show="showSaveForm">
            角色ID:
            <input type="text" name="id" :value="currentRole.id"  readonly><br/>
            角色名称:
            <input type="text" name="name" v-model="currentRole.name"><br/>
            角色描述:
            <input type="text" name="description" v-model="currentRole.description"><br/>
            apis:
            <table>
                <tr>
                    <th>API名称</th>
                    <th>API路径</th>
                    <th>API描述</th>
                    <th>API状态</th>
                </tr>
                <tr v-for="api in allApis" :key="api.id">
                    <td>{{ api.id }}</td>
                    <td>{{ api.name }}</td>
                    <td>{{ api.path }}</td>
                    <td>{{ api.description }}</td>
                    <td><input type="checkbox" name="apiIds" :value="api.id" v-model="currentApiIds"></td>
                </tr>
            </table>
            <button>保存</button>
        </form>
        {{currentApiIds}}
    </div>
<script>
    // 设置axios的默认baseURL
    axios.defaults.baseURL = 'http://localhost:8080';
    // 创建Vue实例
    const app = new Vue({
        el: '#app',
        data: {
            roles: [],
            allApis: [],
            currentRole: {
                id: '',
                name: '',
                description: ''
            },
            currentApiIds: [],
            showSaveForm: false
        },
        created() {
            // 发送GET请求获取角色列表
            axios.get('/role/getall')
                .then(response => {
                    if(response.data.success){
                        console.log(response.data.data)
                        this.roles = response.data.data;
                    }
                })
                .catch(error => {
                    console.error('获取角色列表失败', error);
                })

            axios.get("/api/getall")
                .then(response => {
                    if(response.data.success){
                        this.allApis = response.data.data;
                    }
                })
        },
        methods: {
            saveRole() {
                // 发送POST请求保存角色
                const roleSave = {
                    id: this.currentRole.id,
                    name: this.currentRole.name,
                    description: this.currentRole.description,
                    apiIds: this.currentApiIds
                }
                console.log(roleSave)
                axios.post('/role/save', roleSave)
                   .then(response => {
                        if(response.data.success){
                            alert('角色保存成功');
                            this.showSaveForm = false;
                        }
                    })
                   .catch(error => {
                        console.error('保存角色失败', error);
                    })
            },
            showUpdateFrom(id){
                //查询角色对应的API
                axios.get(`/role/getById/${id}`)
                    .then(response => {
                        if(response.data.success){
                            this.showSaveForm = true;

                            let role = response.data.data;
                            this.currentRole.id = role.id;
                            this.currentRole.name = role.name;
                            this.currentRole.description = role.description;
                            this.currentApiIds= role.apiIds
                            // console.log(this.currentApiIds)
                        }
                    })
            },
            showAddForm(){
                this.showSaveForm = true;
                this.currentRole.id = '';
                this.currentRole.name = '';
                this.currentRole.description = '';
                this.currentApiIds = [];
            }
        }
    })
</script>
</body>
</html>